<template>
  <v-app id="inspire">
    <v-app-bar color="white" flat app>
      <v-app-bar-nav-icon
        id="nav_icon"
        @click="drawer = true"
      ></v-app-bar-nav-icon>
      <v-tabs centered center-active class="tabs" color="grey darken-1">
        <v-tab v-for="link in links" :key="link.text" :to="link.url">
          {{ link.text }}
        </v-tab>
      </v-tabs>
      <v-avatar id="avatar" size="36">
        <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
      </v-avatar>
    </v-app-bar>
    <v-navigation-drawer v-model="drawer" absolute temporary>
      <v-list nav dense>
        <v-list-item-group v-model="group" active-class="">
          <v-list-item>
            <v-list-item-icon>
              <v-icon>mdi-home</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Home</v-list-item-title>
          </v-list-item>

          <v-list-item>
            <v-list-item-icon>
              <v-icon>mdi-account</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Account</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <v-main>
      <!-- 给应用提供合适的间距 -->
      <v-container>
        <!-- 如果使用 vue-router -->
        <router-view></router-view>
      </v-container>
    </v-main>
    <v-footer padless>
      <v-row justify="center" no-gutters>
        <v-btn
          v-for="link in footerLinks"
          :key="link"
          text
          rounded
          class="my-2"
        >
          {{ link }}
        </v-btn>
        <v-col class="lighten-2 py-4 text-center" cols="12">
          {{ new Date().getFullYear() }} — <strong>Vuetify</strong>
        </v-col>
      </v-row>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    //
    links: [
      { text: "首页", url: "/" },
      { text: "关于", url: "/about" },
    ],
    drawer: false,
    group: null,
    footerLinks: ["Home", "About Us", "Team", "Services", "Blog", "Contact Us"],
  }),
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
#nav_icon {
  display: none;
}
@media screen and (max-width: 500px) {
  .tabs {
    display: none;
  }
  #nav_icon {
    display: block;
  }
  #avatar{
    display: none;
  }
}
</style>
